<template>
    <div>
        <h1>康复理疗管理--列表</h1>

        <div>
            项目名称
            <input type="text" v-model="queryInfo.name">
            <input type="button" value="查询" @click="getlist">
            <input type="button" value="批量启用" @click="UpDown(1)">
            <input type="button" value="批量禁用" @click="UpDown(0)">
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checkAll" @click="gocheckall()"></td>
                    <td>项目名称</td>
                    <td>项目编号</td>
                    <td>服务时长</td>
                    <td>服务人数</td>
                    <td>佣金（元）</td>
                    <td>项目说明</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>

                <tr v-for="item in data.list" :key="item.id">
                    <td><input type="checkbox" v-model="ids" :value="item.id" @change="checkone()"></td>
                    <td>{{item.name}}</td>
                    <td>{{item.code}}</td>
                    <td>{{item.hour}}</td>
                    <td>{{item.peopleNum}}</td>
                    <td>{{item.price.toFixed(2)}}</td>
                    <td>{{item.des}}</td>
                    <td>{{item.state==1?'启用':'禁用'}}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-primary" @click="del(item.id)">
                    </td>
                </tr>
            </tbody>
        </table>

        <div>
            共{{data.totalCount}}条数据，当前第{{queryInfo.pageIndex}}页，共{{data.totalPage}}页
            <input type="button" value="首页" @click="gopage('a')">
            <input type="button" value="上一页" @click="gopage('b')">
            <input type="button" value="下一页" @click="gopage('c')">
            <input type="button" value="尾页" @click="gopage('d')">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
const router = useRouter();
const route = useRoute();

const gopage = (str:string) => {
    switch(str){
        case 'a':
            queryInfo.pageIndex = 1;
            break;
        case 'b':
            queryInfo.pageIndex--;
            break;
        case 'c':
            queryInfo.pageIndex++;
            break;
        case 'd':
            queryInfo.pageIndex = data.totalPage;
            break;
    }
    getlist();
}

let data:any = reactive({
    list:[],
    totalCount:0,
    totalPage:0,
})

let queryInfo = reactive({
    name:'',
    pageIndex:1,
    pageSize:2
})


onMounted(()=>{
    getlist();
})

const getlist = () => {
    axios({
        url:'/api/KF/GetKFModels',
        method:'get',
        params:queryInfo
    })
    .then((res)=>{
        console.log(res)
        data.list = res.data.list
        data.totalCount = res.data.totalCount
        data.totalPage = res.data.totalPage
    })
    .catch((err)=>{
        console.log(err)
    })
}


const del = (id:any) => {
    var f = confirm('确定要删除吗？')
    if(f){
        axios({
            url:'/api/KF/DelKF',
            method:'delete',
            params:{
                id:id
            }
        })
        .then((res)=>{
            if(res.data > 0){
                alert('删除成功')
                getlist();
            }
        })
        .catch((err)=>{
            console.log(err)
        })
    }
}


let ids = ref([]);

let checkAll = ref(false);

const gocheckall = () => {
    checkAll.value = !checkAll.value;
    if(checkAll.value==true){
        ids.value = data.list.map((item:any)=>{
            return item.id
        })
    }
    else{
        ids.value = []
    }
}

const checkone = () => {
    if(ids.value.length == data.list.length){
        checkAll.value = true;
    }
    else{
        checkAll.value = false;
    }
}


const UpDown = (state:any) => {
    axios({
        url:'/api/KF/UpdALLKF',
        method:'put',
        params:{
            ids:ids.value.toString(),
            state:state
        }
    })
    .then((res)=>{
        console.log(res);
        if(res.data>0){
            alert('操作成功')
            getlist();
        }
    })
    .catch((err)=>{
        console.log(err)
    })
}

</script>

<style scoped>

</style>